
import styles from './userInfo.module.scss'
import { Link, useNavigate } from "react-router-dom";

import { Button,message,Modal } from 'antd';
import { useStore } from '@/store';
import useGetUserInfo from '@/hooks/useGetUserInfo';


const flag = true

const Fn = ()=>{
  if(flag) return (
       //未登录
       <div className={styles.optone} >
         <Link className={styles.login} to={"/login"}>登录</Link>
         <Link className={styles.login} to={"/register"}>注册</Link>
       </div>
  )
  return (
      //已登录
       <div className={styles.opttwo}>
          已登录
       </div>
  )
}


const UserInfo = ()=>{
  const store = useStore()
  const navigate = useNavigate()
      

  //获取用户信息

  const {username} = useGetUserInfo()

  //退出登录
  const handleLogout = ()=>{
    //确认退出
    Modal.confirm({
      title: '确认退出',
      content: '是否确认退出登录？',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        localStorage.removeItem('token')
        store.setToken('')
        store.setInfo({
          username: '',
          nickname: '',
        })
        setTimeout(()=>{
          message.success('退出成功')
        })

        navigate('/')
        
      },
    })
  }

  


  return (
    <div className={styles.userInfo}>
      {!username ? <Fn/> : <div style={{color:"red"}}>欢迎{username}登录<Button onClick={handleLogout}>退出</Button></div>}
    </div>
  )
}

export default UserInfo